<!DOCTYPE html>
<html>
  <head>
    <title>index.html</title>
	<base href="${CONTEXT_PATH}/">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="styles/css/common.css">
    <link rel="stylesheet" type="text/css" href="styles/css/style.css">
 	<link rel="stylesheet" type="text/css" href="styles/lib/ztree/css/menuTree.css" >
 	<link rel="stylesheet" type="text/css" href="styles/lib/ztree/css/zTreeStyle.css" >
 
	<script type="text/javascript" src="styles/js/jquery.min.js"></script>
    <script type="text/javascript" src="styles/js/jquery.SuperSlide.js"></script>
	<script type="text/javascript" src="styles/lib/ztree/js/jquery.ztree.core-3.5.min.js"></script>
	
    <script type="text/javascript">
    
    var curMenu = null, zTree_Menu = null;
	var setting = {
		view: {
			showLine: false,
			showIcon: false,
			selectedMulti: false,
			dblClickExpand: false,
			addDiyDom: addDiyDom
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			beforeClick: this.beforeClick,
			onClick: this.onClick
		}
	};

	var zNodes =[
	 			{ id:1, pId:0, name:"系统管理", open:true},
	 			{ id:11, pId:1, name:"用户管理",url:"system/user/list",target:"right"},
	 			{ id:12, pId:1, name:"角色管理"},
	 	
	 		];

	 		function beforeClick(treeId, node) {
	 			if (node.isParent) {
	 				if (node.level === 0) {
	 					var pNode = curMenu;
	 					while (pNode && pNode.level !==0) {
	 						pNode = pNode.getParentNode();
	 					}
	 					if (pNode !== node) {
	 						//var a = $("#" + pNode.tId + "_a");
	 						//a.removeClass("cur");
	 						zTree_Menu.expandNode(pNode, false);
	 					}
	 					//a = $("#" + node.tId + "_a");
	 					//a.addClass("cur");

	 					var isOpen = false;
	 					for (var i=0,l=node.children.length; i<l; i++) {
	 						if(node.children[i].open) {
	 							isOpen = true;
	 							break;
	 						}
	 					}
	 					if (isOpen) {
	 						zTree_Menu.expandNode(node, true);
	 						curMenu = node;
	 					} else {
	 						zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
	 						curMenu = node.children[0];
	 					}
	 				} else {
	 					zTree_Menu.expandNode(node);
	 				}
	 			}
	 			return !node.isParent;
	 		}
	 		function onClick(e, treeId, node) {
	 			//alert("Do what you want to do!");
	 			//$("#rightMain").attr("src",node._url);
	 		}
	 		
	 		function addDiyDom(treeId, treeNode) {
				var spaceWidth = 5;
				var switchObj = $("#" + treeNode.tId + "_switch"),
				icoObj = $("#" + treeNode.tId + "_ico");
				switchObj.remove();
				icoObj.before(switchObj);

				if (treeNode.level > 1) {
					var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
					switchObj.before(spaceStr);
				}
			}

	 		$(document).ready(function(){
	 			var treeObj = $("#menuTree");
	 			$.fn.zTree.init(treeObj, setting, zNodes);
	 			zTree_Menu = $.fn.zTree.getZTreeObj("menuTree");
	 			curMenu = zTree_Menu.getNodes()[0].children[0];
	 			zTree_Menu.selectNode(curMenu);
	 			//var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
	 			//a.addClass("cur");
	 			treeObj.addClass("showIcon");
	 		});

  </script>
  
  	<style type="text/css">
		.ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
		.ztree li ul{ margin:0; padding:0}
		.ztree li {line-height:30px;}
		.ztree li a {width:179px;height:30px;padding-top: 0px;}
		.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
		.ztree li a span.button.switch {visibility:hidden}
		.ztree.showIcon li a span.button.switch {visibility:visible}
		.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
		.ztree li span {line-height:30px;}
		.ztree li span.button {margin-top: -7px;}
		.ztree li span.button.switch {width: 16px;height: 16px;}
		
		.ztree li a.level0 {background-color: #bde3fa;margin-bottom: 1px;}
		.ztree li a.level0 span {font-size: 120%;font-weight: bold;}
		.ztree li span.button {background-image:url("${CONTEXT_PATH}/styles/images/left_menuForOutLook.png"); *background-image:url("${CONTEXT_PATH}/styles/images/left_menuForOutLook.gif")}
		.ztree li span.button.switch.level0 {width: 20px; height:20px}
		.ztree li span.button.switch.level1 {width: 20px; height:20px}
		.ztree li span.button.noline_open {background-position: 0 0;}
		.ztree li span.button.noline_close {background-position: -18px 0;}
		.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
		.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
	</style>
  </head>
  
  <body>
    <div class="top">
      <div id="top_t">
        <div id="logo" class="fl"></div>
        <div id="photo_info" class="fr">
          <div id="photo" class="fl">
            <a href="#"><img src="${CONTEXT_PATH}/styles/images/a.png" alt="" width="60" height="60"></a>
          </div>
          <div id="base_info" class="fr">
            <div class="help_info">
              <a href="1" id="hp">&nbsp;</a>
              <a href="2" id="gy">&nbsp;</a>
              <a href="3" id="out">&nbsp;</a>
            </div>
            <div class="info_center">
              admin
              <span id="nt">通知</span><span><a href="#" id="notice">3</a></span>
            </div>
          </div>
        </div>
      </div>
      
      <div id="side_here">
        <div id="side_here_l" class="fl"></div>
        <div id="here_area" class="fl">当前位置：</div>
      </div>
    </div>
    
    
    <div class="side" style="overflow-y:scroll;overflow-x:auto;">
    	<ul id="menuTree" class="ztree"></ul>
    </div>
    
    
    <div class="main">
       <iframe name="right" id="rightMain" src="main" frameborder="no" scrolling="auto" width="100%" height="auto" allowtransparency="true"></iframe>
    </div>
    
    
    <div class="bottom">
      <div id="bottom_bg">版权</div>
    </div>
    
    
    <div class="scroll">
          <a href="javascript:;" class="per" title="使用鼠标滚轴滚动侧栏" onclick="menuScroll(1);"></a>
          <a href="javascript:;" class="next" title="使用鼠标滚轴滚动侧栏" onclick="menuScroll(2);"></a>
    </div>
  </body>
</html>
